<template>
  <div class="app-container">
    <div class="filter-container">
      <!--字典类别key搜索   @keyup.enter.native="page1SearchPageList" 表示按回车进行搜索 page1SearchPageList是搜索方法 -->
      <el-input
        v-model="search.id"
        placeholder="字典类别Key"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <el-input
        v-model="search.dt_type_name"
        placeholder="字典名称"
        class="filter-item search_input"
        @keyup.enter.native="page1SearchPageList"
      />
      <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="page1SearchPageList" 代表点击执行搜索方法 -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="page1SearchPageList"
      >
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="ddtCreateShow"
      >
        添加
      </el-button>
    </div>
    <!--用于显示数据列表的table  -->
    <!-- v-loading="listLoading" 代表是否在加载的时候显示load动画, listLoading是个变量-->
    <!-- :data="list" 把数据list绑定到table-->
    <!-- element-loading-text="加载"   加载的时候显示的文本-->
    <!-- border   是否带有纵向边框-->
    <!-- fit   列的宽度是否自撑开-->
    <!--  highlight-current-row   是否要高亮当前行-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="字典类别加载"
      border
      fit
      highlight-current-row
    >
      <!--el-table-column 代表1列 -->
      <!--slot-scope="scope"  vue插槽  参看 https://www.jianshu.com/p/981d37be0307  -->
      <!--{{ scope.row.user_name }} 表示该列绑定数据的 user_name列 -->
      <el-table-column align="center" label="字典类别Key" min-width="10%">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          {{ scope.row.dt_type_name }}
        </template>
      </el-table-column>
      <el-table-column label="描述" min-width="40%" align="center">
        <template slot-scope="scope">
          <!-- scope.row.user_status | statusFilter  使用vue过滤器显示状态值对应的文本 |左边代表参数,右边代表过滤器, 过滤器在下面代码有定义  -->
          {{ scope.row.dt_type_remark }}
        </template>
      </el-table-column>
      <el-table-column label="排序" min-width="10%" align="center">
        <template slot-scope="scope">
          {{ scope.row.dt_type_orderby }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <!--修改按钮 -->
        <!-- slot-scope="{ row, $index }"   row代表数据按钮对应的行,  index代表当前行的下标-->
        <template slot-scope="{ row }">
          <!-- @click="handleUpdate(row)  点击按钮执行handleUpdate方法,  row:当前行对应的数据-->
          <el-button type="primary" size="mini" @click="ddtUpdateShow(row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <!--分页是自定义插件  由代码import Pagination from "@/components/Pagination"; 来引入 在下面有引入的代码   -->
    <!--分页插件在下面的 default的 components: { Pagination } 进行引入 代码大约在第160行附近 -->
    <!--v-show="total > 0"  总行数大于0的时候显示分页-->
    <!--:total="total"  总行数绑定total字段-->
    <!--:page.sync="search.page" 绑定当前页字段-->
    <!--:limit.sync="search.page" 绑定页长度-->
    <!-- @pagination="searchPageList"   点击分页执行的方法-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="search.page"
      :limit.sync="search.maxResultCount"
      @pagination="searchPageList"
    />
    <!--弹出层-->
    <!--:visible.sync="dialogFormVisible"  是否显示弹出层  dialogFormVisible变量在下面有定义-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!--表单定义-->
      <!-- ref="dicTypeForm"   表单命名,类似于以前的id-->
      <!--:rules="rules"   对应的验证规则, rules 验证规则json 下面有定义-->
      <!--:model="adminUserInfo"   表单绑定的数据模型-->
      <!---label-width="120px" 设置标签宽度,如果不设置会产生错位问题-->
      <el-form
        ref="dicTypeForm"
        :rules="rules"
        :model="dicTypInfo"
        label-position="right"
        label-width="120px"
      >
        <!--el-row  代表一行-->
        <el-row>
          <!--:span="12" 代表占一半的地方-->

          <el-col :span="8">
            <!--::rules="this.dialogStatus === '1' ? rules.id : []"   表示添加的时候才验证字典key是否被占用-->
            <el-form-item
              label="字典类别Key"
              prop="id"
              :rules="this.dialogStatus === '1' ? rules.id : []"
            >
              <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
              <el-input
                v-if="this.dialogStatus === '1'"
                v-model="dicTypInfo.id"
              />
              <!-- v-else  vue 的else  和上面的if判断对应-->
              <el-tag v-else type="info">{{ dicTypInfo.id }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <!--\u3000代表大空格 -->
            <el-form-item label="排序" prop="dt_type_orderby">
              <el-input v-model.number="dicTypInfo.dt_type_orderby" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="字典类别名称" prop="dt_type_name">
          
          <el-input v-model="dicTypInfo.dt_type_name" />
       
        </el-form-item>

        <el-form-item label="备注" prop="dt_type_remark">
         
          <el-input
          type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            v-model="dicTypInfo.dt_type_remark"
          />
           
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
        <el-button
          type="primary"
          @click="dialogStatus === '1' ? addDictType() : updateDictType()"
        >
          保存
        </el-button>
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  dttGetAll,
  dttCreated,
  dttGet,
  dttUpdate,
  ddtValidatorId,
} from "@/api/system_base/dictionaryTableType"; // 引入字典类别操作api
import Pagination from "@/components/Pagination"; // 引入分页组件

export default {
  name: "dictionaryTableType",
  components: { Pagination },
  data() {
    // 验证输入用户名是否有效(是否在数据库中存在)
    var ValidatorId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入Id"));
      } else {
        ddtValidatorId(value).then((response) => {
          if (response.result) {
            callback();
          } else {
            callback(new Error("输入字典类别Key已经被占用"));
          }
        });
      }
    };
    return {
      rules: {
        // 验证配置
        // 验证
        id: [
          { required: true, message: "字典类别Key必须输入", trigger: "change" }, // 验证是否为空
          { validator: ValidatorId, trigger: "blur" }, // 自定义验证, 验证字典Key是否可以使用
        ],
        dt_type_orderby: [
          { required: true, message: "字典类别排序必须输入" },
          { type: "number", message: "字典类别排序必须输入" },
        ],
        dt_type_name: [
          {
            required: true,
            message: "字典类别名称必须输入",
            trigger: "change",
          },
        ],
      },
      list: null, //表格绑定数据
      listLoading: true, //是否显示加载提示
      total: 0, //总行数
      search: {
        //搜索对象
        page: 1, //当前页
        maxResultCount: 10, //每页多少条
        skipCount: 0, //当前页第一条记录位置  用于abp接口
        id: "", //字典类别表key
        dt_type_name: "", //  字典类别表名称
      },
      dialogFormVisible: false, // 是否显示弹出层
      dialogTitle: "", // 弹出层标题
      dialogStatus: "1", // 等于1 表示是添加操作   不等于1 表示修改操作
      dicTypInfo: {},
    };
  },
  created() {
    this.resetDicinfo(); //初始化model
    this.searchPageList();
  },
  methods: {
    searchPageList() {
      // 搜索方法
      this.listLoading = true; // 显示加载效果

      this.skipCount = (this.search.page - 1) * this.maxResultCount;

      dttGetAll(this.search).then((response) => {
        // 调用分页接口
        this.list = response.result.items; // 将查询结果赋值给list
        this.listLoading = false; // 隐藏加载效果
        this.total = response.result.totalCount; // 赋值总行数
      });
    },
    page1SearchPageList() {
      // 点击搜索
      // 搜索方法
      this.search.page = 1; // 将当前页设置为第一页
      this.searchPageList(); // 调用搜索分页方法
    },
    resetDicinfo() {
      // 初始化用户对象
      this.dicTypInfo = {
        id: "",
        dt_type_name: "",
        dt_type_remark: "",
        dt_type_orderby: 0,
      };
    },
    ddtCreateShow() {
      //弹出添加页面
      this.resetDicinfo();
      this.dialogStatus = "1"; // 等于1 表示是添加操作   不等于1 表示修改操作
      this.dialogTitle = "添加";
      this.dialogFormVisible = true; // 当等于true  弹出层显示
      this.$nextTick(() => {
        this.$refs["dicTypeForm"].clearValidate(); // 清理验证
      });
    },
    addDictType() {
      //添加方法
      this.$refs["dicTypeForm"].validate((valid) => {
        if (valid) {
          dttCreated(this.dicTypInfo).then((response) => {
            this.dialogFormVisible = false;
            this.searchPageList();
            this.$notify({
              title: "添加成功",
              message: "添加字典类别成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    ddtUpdateShow() {
      //修改弹出层显示
    },

    updateDictType() {},
  },
};
</script>
<style >
.search_input {
  width: 200px;
}
</style>
